<template>
  <div class="me-wrapper">
    <common-header :title="title"
                   class="me-header"></common-header>
    <common-scroll class="scroll"
                   :data="lists">
      <div class="content">
        <common-comments :list="lists"
                         class="me-comments"></common-comments>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommonScroll from 'common/scroll/Scroll'
import CommonComments from 'common/comments/Comments'
export default {
  name: 'Merchant',
  components: {
    CommonScroll,
    CommonHeader,
    CommonComments
  },
  props: {
    title: {
      type: String,
      default: '评论列表'
    }
  },
  data () {
    return {
      lists: []
    }
  },
  methods: {
    getComments () {
      const id = this.$route.params.id
      this.$api.comments.getComments({ page: 1, seller_id: id })
        .then(this.getCommentsSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getCommentsSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.lists = data
      }
    }
  },
  created () {
    this.getComments()
  },
  activated () {
    this.$nextTick(() => {
      this.getComments()
    })
  },
  deactivated () {
    this.getComments = null
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.me-comments >>> .comments
  border-radius 20px
  margin-bottom 20px
  min-height 150px

.me-wrapper
  background-color $bgcWh

.me-header
  position absolute
  top 0
  left 0
  width 100%
  background-color $bgcWh

.scroll
  background-color $bgc
  margin-top 100px
  z-index 8

  .content
    height auto

    .me-comments
      padding()
      padding-top 20px
</style>
